<template>
  <div ref="baseBar" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";

export default {
  props: {
    renderData: {
      type: Array,
      default: () => [],
    },
    // 显示图例
    showLegend: {
      type: Boolean,
      default: () => false,
    },
    // x轴标签旋转
    rote: {
      type: Boolean,
      default: () => false,
    },
    // fontSize
    fontSize: {
      type: Number,
      default: () => 14,
    },
    // x轴的标签
    xAxisData: {
      type: Array,
      default: () => ["一月", "二月", "三月", "四月", "五月", "六月"],
    },
    // y轴的名称（y轴的单位）
    yAxisName: {
      type: String,
      default: () => "家",
    },
    // 柱子的渐变色
    gradientColor: {
      type: Array,
      default: () => [
        ["#FF9966", "#F65B0E"],
        ["#53E80C", "#2DAF14"],
      ],
    },
    // 是否渐变
    isGradient: {
      type: Boolean,
      default: () => false,
    },
    // 数据
    seriesData: {
      type: Array,
      default: () => [
        {
          name: "总项目数",
          data: [80, 78, 98, 80, 78, 80],
        },
        {
          name: "已办结项目数",
          data: [58, 70, 80, 58, 70, 55],
        },
      ],
    },
    colorList: {
      type: Array,
      default: () => [
        "#FF9966",
        "#F65B0E",
        "#53E80C",
        "#2DAF14",
        "#FF9966",
        "#F65B0E",
        "#53E80C",
        "#2DAF14",
      ],
    },
    // 柱子的宽度
    barWidth: {
      type: Number,
      default: () => 15,
    },
    option: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  watch: {
    renderData: {
      deep: true,
      handler(val) {
        this.loadData();
      },
    },
  },
  mounted() {
    this.initChart();
    $(window).on("resize", this.resize);
  },
  beforeDestroy() {
    this.EC.dispose();
    $(window).off("resize", this.resize);
    delete this.EC;
    delete this.op;
  },
  methods: {
    initChart() {
      this.EC = echarts.init(this.$refs.baseBar);
      this.loadData();
    },
    getGradientColor(gradientColor = ["#44A5FF", "#037AE9"]) {
      let color = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: gradientColor[0] },
          { offset: 1, color: gradientColor[1] },
        ],
      };
      // console.log(color, "color----");

      return color;
    },
    loadData() {
      let chartData = [].concat(this.renderData);

      let seriesData = this.seriesData.map((item, i) => {
        return {
          name: item.name,
          data: item.data,
          type: "bar",
          barWidth: this.barWidth,
          // 间距
          barGap: "30%",
          itemStyle: {
            borderRadius: 10,
            color: this.isGradient
              ? this.getGradientColor(this.gradientColor[i])
              : this.colorList[i],
          },
        };
      });
      // console.log(this.isGradient, "?0000???");
      // console.log(seriesData, "????");

      this.op = {
        legend: {
          show: this.showLegend,
          data: this.seriesData.map((item) => item.name),
          top: -5,
          left: 250,
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 30,
          icon: "roundRect",
          borderRadius: 15,
          textStyle: {
            color: "#5E6E88",
            fontSize: 14,
          },
        },
        tooltip: {
          show: true,
        },
        grid: {
          top: 40,
          bottom: 30,
          left: 50,
          right: 50,
        },
        xAxis: {
          type: "category",
          data: this.xAxisData,
          axisLine: {
            lineStyle: {
              color: "#EDEDED",
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#666",
            fontSize: this.fontSize ? this.fontSize : 16,
            rotate: this.rote ? 45 : 0,
          },
        },
        yAxis: {
          type: "value",
          // name: `（${this.yAxisName}）`,
          nameLocation: "start",
          nameTextStyle: {
            color: "#ABC1D1",
            align: "right",
            verticalAlign: "top",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#EDEDED",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#999",
            fontSize: 16,
          },
          splitLine: {
            lineStyle: {
              color: "#EDEDED",
              type: "solid",
            },
          },
        },
        series: seriesData,
      };
      const option = $.extend(true, this.op, this.option);
      this.EC.setOption(this.op, true);
      this.resize();
    },
    resize() {
      this.EC.resize();
    },
  },
};
</script>
